<template>
  <div style="height: 85vh;position:relative ;">
    <div style="position: absolute; margin-left:10px; margin-top:10px;">
      <el-input placeholder="搜索定位设备编号" v-model="deviceId" style="width: 260px;">
        <template #append>
          <el-button
              :icon="Search"
              style="color: #fff; background-color: #409EFF;"
              @click="handleSearch"
          />
        </template>
      </el-input>
    </div>
    <div>
      <div>
        <el-radio-group v-model="layer" class="btn_d btnLayer">
          <el-radio-button
              v-for="area in areaDetail"
              :label="area.buildName"
              @change="showFloor(area.floorDesc)"
              :key="area"
          >{{ area.buildName }}
          </el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="subLayer" v-if="hasSub" class="'btn_c subLayer">
          <el-radio-button
              v-for="area in subLayers"
              :label="area.buildName"
              @change="switchMap(area.name)"
              :key="area"
          >{{ area.buildName }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="mapLegend_b mapLegend">
        <span class="title1">图例</span>
        <div class="legendBox">
          选中
          <div class="legend orange"/>
        </div>
        <div class="legendBox">
          正常
          <div class="legend green"/>
        </div>
        <div class="legendBox">
          故障
          <div class="legend red"/>
        </div>
      </div>
    </div>
    <map-control @mapLoad="mapLoadEvent"></map-control>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from "vue";
import {Search} from "@element-plus/icons-vue";
import {areaDetail} from "@/config/config";
import {store} from "@/components/map/mapStore";
import {image} from "@/assets/index";
import mapControl from "@/components/map/index.vue";
import {selectEqptAndRep} from '@/api/monitor/device.ts'
// 用于保存机场层级
const layer = ref();
// 用于保存选择的机场子层级
const subLayer = ref();
// 用于保存机场子层级数组
const subLayers = ref([]);
// 是否显示机场子层级
const hasSub = ref(false);

const activeName = ref("first");
// 用于保存搜索设备编号的关键字
const deviceId = ref("");
// 用于保存地图坐标及相关信息
const mapPoint = ref({});


const showFloor = (val: string[]) => {
  if (val != undefined) {
    subLayers.value = val;
    hasSub.value = true;
  } else {
    hasSub.value = false;
  }
};

const switchMap = (name: string) => {
  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
    console.log(evt);
    console.log("回调");
  });
};

// 点击事件
const mapLoadEvent = () => {
  drawTextLayer(points.value);
};
const points = ref([
  {
    x: 137256.9530350399,
    y: 40063.6462263813,
    name: "设施设备A01",
    type: "设备类型A",
    status: "正常",
    no: "A01",
    dept: "XX部门",
    content: "xxxxxxx",
    lastTime: "2023-03-11",
    executor: "张三"
  },
  {
    x: 137167.8510350399,
    y: 40074.6562263813,
    name: "设施设备A02",
    type: "设备类型B",
    status: "故障",
    no: "A02",
    dept: "YY部门",
    content: "yyyyyyy",
    lastTime: "2023-03-21",
    executor: "李四"
  }
]);
const drawTextLayer = points => {
  const hightSymbol = {
    // 高亮样式
    type: 'simple-marker',
    color: [251, 219, 176],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
  const markerNormal = {
    // 正常样式
    type: 'simple-marker',
    color: [200, 254, 166],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
  const markerFailure = {
    // 故障样式
    type: 'simple-marker',
    color: [255, 0, 0],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
  // 数据拆分和数据处理根据具体情况进行修改
  store.BNMap.removeGraphicsLayer('lableLayer')
  // 向地图添加临时图层
  const lableLayer = store.BNMap.creatGraphicsLayer({id: 'lableLayer'})
  lableLayer.removeAll()

  if (!points.length) return // 当points空数组

  points.forEach(p => {
    // 创建点
    const point = store.BNMap.createPoint({
      x: p.x,
      y: p.y,
      spatialReference: store.BNMap.spatialReference
    })
    // 文字样式
    const textSymbol = {
      type: 'text',
      color: '#00FFFF',
      haloColor: 'black',
      haloSize: '1px',
      text: p.name,
      xoffset: 5, // x轴上的偏移
      yoffset: 10,
      font: {
        size: 12
      }
    }
    // 创建graphic
    const pointGraphic = store.BNMap.graphic(point, textSymbol)
    let markerGraphic
    if (p.status === '正常') {
      markerGraphic = store.BNMap.graphic(point, markerNormal)
    } else {
      markerGraphic = store.BNMap.graphic(point, markerFailure)
    }
    markerGraphic.attributes = {
      NAME: p.name,
      NO: p.no,
      TYPE: p.type,
      DEPT: p.dept,
      CONTENT: p.content,
      LAST: p.lastTime,
      EXECUTOR: p.executor,
      STATUS: p.status
    };
    lableLayer.add(pointGraphic);
    lableLayer.add(markerGraphic);
  });
  store.BNMap.bindEvent("lableLayer", "click", function (evt) {
    const myLayer = "";
    if (evt.clickResult != null) {
      const myLayer = lableLayer.graphics.items.filter(function (result) {
        if (result.attributes != undefined) {
          return (
              result.attributes.NO ===
              evt.clickResult.results[0].graphic.attributes.NO
          );
        }
      })[0];
      console.log(myLayer.attributes);
      
      myLayer.symbol = hightSymbol;
      // 弹窗显示内容
      let html;
      // 设置弹窗内容,此处的判断和显示数据根据实际数据进行修改
      if (myLayer.attributes.STATUS === "正常") {
        html =
            '<table style="font-size: 12px; border-spacing: 12px;">' +
            '<tr><td style="color:#bdbcbc;">设备编号:</td><td>' +
            myLayer.attributes?.NAME +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc;">设备型号:</td><td>' +
            myLayer.attributes?.NO +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc;">使用部门:</td><td>' +
            myLayer.attributes?.TYPE +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc;">维护内容:</td><td>' +
            myLayer.attributes?.TYPE +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc;">末次维护时间:</td><td>' +
            myLayer.attributes?.TYPE +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc;">执行人:</td><td>' +
            myLayer.attributes?.TYPE +
            "</td></tr>" +
            "</table>";
        store.BNWindows.setTitle(
            myLayer.attributes?.eqptModel +
            "【" +
            myLayer.attributes?.eqptType +
            "】" +
            "<span style='display: inline-block; width: 50px; height: 22px; text-align: center; border-radius: 4px; line-height: 22px;" +
            "background-color: #ecfdd1; border: 1px solid #ecfdd1; color: #70b603;'>正常</span>"
        );
      } else {
        html =
            '<div style="line-height: 32px; height: 32px; font-size: 14px;">' +
            "<span>基本信息</span>" +
            "</div>" +
            '<table style="font-size: 12px; border-spacing: 12px;">' +
            '<tr><td style="color:#bdbcbc;">设备编号:</td><td>' +
            myLayer.attributes?.eqptId +
            '</td><td style="color:#bdbcbc;">设备型号：</td><td>' +
            myLayer.attributes?.eqotMode +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">使用部门:</td><td>' +
            myLayer.attributes?.useOrgans[0]?.organName +
            '</td><td style="color:#bdbcbc;">维护内容：</td><td>' +
            myLayer.attributes?.problemDesc +
            "</td></tr>" +
            '<tr><td style="width:90px;color:#bdbcbc">末次维护时间:</td><td style="width:120px;">' +
            myLayer.attributes?.lastMaintenanceTime +
            '</td><td style="width:62px;color:#bdbcbc;">执行人：</td><td>' +
            myLayer.attributes?.organUserName +
            "</td></tr>" +
            '</table><div style="line-height: 32px; height: 32px; font-size: 14px;"><span>报修详情</span><span style="margin-left: 20px;">维修详情</span></div>' +
            '<table style="font-size: 12px; border-spacing: 12px;">' +
            '<tr><td style="width:90px;color:#bdbcbc">上报单位:</td><td style="width:120px;">' +
            myLayer.attributes?.organName +
            '</td><td style="width:62px;color:#bdbcbc;">上报人：</td><td>' +
            myLayer.attributes?.organUserName +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">联系电话:</td><td>' +
            myLayer.attributes?.phone +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">上报时间:</td><td>' +
            myLayer.attributes?.upTime +
            '</td><td style="color:#bdbcbc;">紧急情况：</td><td>';
            if(myLayer.attributes.URGENCY === '1'){
              html = html + "非常紧急";
            }else if(myLayer.attributes.URGENCY === '2'){
              html = html + "一般紧急";
            }else if(myLayer.attributes.URGENCY === '3'){
              html = html + "一般";
            }
            html = html +  "</td></tr>" +
            '<tr><td style="color:#bdbcbc">航站楼:</td><td>' +
            myLayer.attributes?.terminal +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">楼层:</td><td>' +
            myLayer.attributes?.eqptFloor +
            '</td><td style="color:#bdbcbc;">位置：</td><td>' +
            myLayer.attributes?.coordinate.latitude +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">设备类型:</td><td>' +
            myLayer.attributes?.eqptType +
            '</td><td style="color:#bdbcbc;">问题类型：</td><td>' +
            myLayer.attributes?.problemType +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">问题描述:</td><td>' +
            myLayer.attributes?.problemDesc +
            "</td></tr>" +
            '<tr><td style="color:#bdbcbc">图片:</td><td>' +
            '<img src="https://files.axshare.com/gsc/34PH56/6d/ff/fa/6dfffae9ffb841329b60d1130952d728/images/航站楼运行数据可视化/u1065.svg?pageId=39c5efc2-78bb-470d-9639-56e88cb59fb0"/>' +
            '<img src="https://files.axshare.com/gsc/34PH56/6d/ff/fa/6dfffae9ffb841329b60d1130952d728/images/航站楼运行数据可视化/u1065.svg?pageId=39c5efc2-78bb-470d-9639-56e88cb59fb0" style="margin-left:10px"/>' +
            "</td></tr>" +
            "</table>";
        store.BNWindows.setTitle(
            myLayer.attributes?.eqptModel +
            "【" +
            myLayer.attributes?.eqptType +
            "】" +
            "<span style='display: inline-block; width: 50px; height: 22px; text-align: center; border-radius: 4px; line-height: 22px;" +
            "background-color: #fdedd7; border: 1px solid #fdedd7; color: #f59a23;'>故障</span>"
        );
      }
      store.BNWindows.setContent(html);
      // 设置弹窗大小
      store.BNWindows.resize(50, 50);
      store.BNWindows.show(evt.mapPoint);
      lableLayer.graphics.items.forEach(result => {
        if (result.attributes != undefined) {
          if (result != myLayer) {
            if (result.attributes.STATUS === '正常') {
              result.symbol = markerNormal
            } else {
              result.symbol = markerFailure
            }
          }
        }
      });
    }
  });
  store.BNMap.addGraphicsLayer(lableLayer);
};

// 点击搜索
const handleSearch = () => {
  console.log("搜索");
  selectEqptAndRep({
    eqptCode: "A89373521"
  }).then((res) => {
    console.log('res:', (res.data))
    points.value = [];
    for (let i of res.data) {
      points.value.push(i)
    }
    drawTextLayer(points.value);
  }).catch(err => {
    console.log(err?.message || '')
  })
};

</script>

<style scoped>
.title {
  line-height: 32px;
  height: 32px;
  font-size: 14px;
}

.tabs > .el-tabs__content {
  margin-left: 20px;
}

.tabs /deep/ .el-tabs__nav-wrap::after {
  display: none !important;
}

.mapLegend_b {
  height: 130px;
  right: 8px;
  top: calc(70vh - 30px);
}

.mapLegend {
  padding: 10px;
  width: 100px;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  transition: right 1s;
  font-size: 12px;
  transition-timing-function: linear;

.legendBox {
  margin-bottom: 8px;
  line-height: 24px;

.legend {
  float: right;
  border-radius: 4px;
  width: 62px;
  height: 22px;
}

.green {
  float: right;
  margin-right: 35px;
  margin-top: 7px;
  border-radius: 4px;
  background: #c8fea6;
  width: 10px;
  height: 10px;
}

.red {
  float: right;
  margin-right: 35px;
  margin-top: 7px;
  border-radius: 4px;
  background: red;
  width: 10px;
  height: 10px;
}

.orange {
  float: right;
  margin-right: 35px;
  margin-top: 7px;
  border-radius: 4px;
  background: #fbdbb0;
  width: 10px;
  height: 10px;
}

}
.title1 {
  display: inline-block;
  height: 12px;
  line-height: 12px;
  margin-right: 2px;
  font-weight: bolder;
  width: 60px;
  margin-top: 2px;
  border-left: 2px solid #2f7df1;
  text-indent: 10px;
  margin: 0 0 15px;
}

}

.subLayer {
  position: absolute;
  width: 35px;
  top: calc(70vh - 60px);
  right: 140px;
  border: 0;
}

.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}

.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}

.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}

.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.btnRight {
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}

.btnLeft {
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
}

.btn_d {
  animation: move 0s reverse;
  right: 190px;
  top: calc(82vh - 24px);
}

.btn_c {
  animation: move 0s reverse;
  right: 10px;
}
</style>
